<template>
  <div>
    <Header></Header>
    <Swiper :swiperList="swiperList"></Swiper>
    <Icons :iconsList="iconsList"></Icons>
    <Recommend :recommendList="recommendList"></Recommend>
    <Weekend :weekendList="weekendList"></Weekend>
  </div>
</template>

<script>
import Header from "./components/Header.vue";
import Swiper from "./components/Swiper.vue";
import Icons from "./components/Icons.vue";
import Recommend from "./components/Recommend.vue";
import Weekend from "./components/Weekend.vue";
import axios from "axios";
export default {
  name: "Home",
  components: { Header, Swiper, Icons, Recommend, Weekend },
  data() {
    return {
      iconsList: [],  // 图标
      recommendList: [],  // 热销推荐
      swiperList: [],  // 轮播 
      weekendList: [], // 周末推荐
      lastCity:''
    };
  },


  methods: {
    getInfo() {
      axios
        .get(`/api/index.json?city=${this.city}`)  // 请求对应城市的数据
        .then(this.getHomeInfoSucc)
        .catch(err => {
          console.log(err.message);
        });
    },
    getHomeInfoSucc(res) {
      const info = res.data.data;  // 首页相关的数据
      this.iconsList = info.iconList;
      this.recommendList = info.recommendList;
      this.swiperList = info.swiperList;
      this.weekendList = info.weekendList;
      this.city = info.city
    }
  },

  mounted() {
    this.lastCity = localStorage.getItem('city');  // 保存上一次的城市定位
    this.getInfo();
  },
  // 使用了缓存，需要在组件激活时重新请求城市数据（城市可能发生改变）
  activated() {
    // 如果城市定位发生改变，则重新请求新的数据
    if(localStorage.getItem('city')!==this.lastCity) {
      this.getInfo();
    }
  },
};
</script>

<style scoped></style>
